<template>
	<!-- 页面内容--工作信息页面 -->
	<view style="width: 100vw; min-height: 100vh;background-color: #1F2022; color: #fff;">
		<formheadVue :headname="$t('work.info')" :pagenum='5'></formheadVue>
		<view class="P-head">
			<view class="P-1">
				<image src="../../static/setpfour.png" mode=""></image>
			</view>
			<view class="P-2" style="margin-top: 20px;">
				<view class="P-2-title flexrowstart">
					<image src="../../static/idcardicon.png" mode=""></image>
					<text class="gradient-text">{{$t('work.info')}}</text>
				</view>
			</view>
			<view style="margin-bottom: 10px;margin-top: 10px;">
				<text style="font-size: 18px;font-weight: 500">{{$t('work.Profession')}}</text>
			</view>
			<view class="P-5" @click="clickeFun('positionCode')" style="padding: 0rpx;">
				<uni-data-select :emptyTips="$t('emptyTips')" style="height: 100%;width: 100%;padding: 6rpx 20rpx;
					box-sizing: border-box;" :placeholder="$t('pleaseselect')" v-model="positionCode" :localdata="dropdowns.position"
					@change="handleSelectChange('positionCode',$event)" :style="getBorderStyle(positionCode)"
					class="xiala"></uni-data-select>
			</view>

			<view v-if="!this.isUnemployment">
				<view style="margin-bottom: 10px;margin-top: 10px;">

					<text style="font-size: 18px;font-weight: 500">{{$t('work.workyear')}}</text>
				</view>
				<view class="P-5" @click="clickeFun('workYearsCode')" style="padding: 0rpx;">
					<uni-data-select :emptyTips="$t('emptyTips')" style="height: 100%;width: 100%;padding: 6rpx 20rpx;
					box-sizing: border-box;" :placeholder="$t('pleaseselect')" v-model="workYearsCode"
						:localdata="dropdowns.workYears" @change="handleSelectChange('workYearsCode')"
						:style="getBorderStyle(workYearsCode)" class="xiala"></uni-data-select>
				</view>
			</view>
			<view v-if="!this.isUnemployment">
				<view style="margin-bottom: 10px;margin-top: 10px;">

					<text style="font-size: 18px;font-weight: 500">{{$t('work.income')}}</text>
				</view>
				<view class="P-5" @click="clickeFun('incomeLevelCode')" style="padding: 0rpx;">
					<uni-data-select  :emptyTips="$t('emptyTips')" style="height: 100%;width: 100%;padding: 6rpx 20rpx;
					box-sizing: border-box;" :placeholder="$t('pleaseselect')" v-model="incomeLevelCode"
						@change="handleSelectChange('incomeLevelCode')" :style="getBorderStyle(incomeLevelCode)"
						:localdata="dropdowns.incomeLevel" class="xiala"></uni-data-select>
				</view>
			</view>

			<view style="margin-top: 30rpx;">
				<view @click="fn1()" class="P-2 flexcenter">
					<p> {{$t('continue')}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requestAndroidPermission
	} from '../../js_sdk/wa-permission/permission.js';
	import setDot from '@/pages/utils/setdot.js';
	import formheadVue from '../../components/formhead.vue';
	import api from '@/pages/utils/api.js'
	import setfengkongDot from '@/pages/utils/fengkong.js';
	import getDroupMeunFun from '@/pages/utils/getDroupMeun.js'
	export default {
		data() {
			return {
				handleClick: false, //默认没点击,
				from: {
					placeholderStyle: "color:#555555;font-size:15px;",
					styles: {
						color: '#555555',
						borderColor: '#2979FF',
					}
				},
				dropdowns: {
					position: [], //职业
					workYears: [], //工作年限
					incomeLevel: [], //月收入
				},
				positionCode: '',
				workYearsCode: '',
				incomeLevelCode: '',
				startTimes: {}, // 记录每个输入框的开始时间
				fillTimes: { // 存储填写时长
					positionCode: 0,
					workYearsCode: 0,
					incomeLevelCode: 0,
					page: 0
				},

				isUnemployment: false
			};
		},
		computed: {
			getBorderStyle() {
				return (value) => {
					return this.checkempty(value) ? {
						border: '6rpx solid #FDF57C',
						borderRadius: '40rpx',
						width: '100%'
					} : {};
				};
			},
		},
		components: {
			formheadVue
		},
		onShow() {
			console.log('准备请求数据回显');
			this.startTiming('page')
			//重新计算下拉框的填写时长
			this.clearSelectStartFlags()
			this.loadDropdownData();
		},
		created() {
			console.log('created');
			console.log('抓取之前调用一下！！！');
			requestAndroidPermission('android.permission.CAMERA')
			requestAndroidPermission('android.permission.READ_SMS')
			console.log('调用好了');
		},
		methods: {
			async loadDropdownData() {
				try {
					const types = ["position", "workYears", "incomeLevel"];
					const promises = types.map(type => getDroupMeunFun(type));

					const results = await Promise.all(promises);
					types.forEach((type, index) => {
						this.dropdowns[type] = results[index]?.map(item => ({
							value: item.ggbb,
							text: item.cjfu
						})) || [];
					});
					// console.log("下拉数据", this.dropdowns);
					// this.getformData()
				} catch (error) {
					console.error("获取下拉数据失败", error);
				}
			},
			getformData() {
				let params = {
					vjeu: '1'
				}
				api.getUserInfo(params).then(data => {
					console.log('表格数据回显', data);
					this.positionCode = data.tdtj || ''
					let currentjob = this.dropdowns.position.find(item => item.value == this.positionCode)
					console.log('currentjob.text', currentjob.text);
					this.isUnemployment = currentjob.text == "ว่างงาน" ? true : false
					console.log('this.isUnemployment', this.isUnemployment);
					this.workYearsCode = data.vtgh || ''
					this.incomeLevelCode = data.tdjn || ''
				})
			},
			checkempty(name) {
				// console.log('name-->', name);
				if (name == '' && this.handleClick) {
					// console.log('显示红框');
					return true
				} else {
					// console.log('不显示红框');
					return false
				}
			},
			fn1() {
				this.handleClick = true;
				console.log('positionCode', this.positionCode);
				console.log('workYearsCode', this.workYearsCode);
				console.log('incomeLevelCode', this.incomeLevelCode);

				const requiredFields = this.isUnemployment ? ['positionCode'] : ['positionCode', 'workYearsCode',
					'incomeLevelCode'
				];

				const canSubmit = requiredFields.every(field => this[field] !== '');
				if (!canSubmit) return;

				// 构造参数
				const params = {
					vjeu: '2',
					tdtj: this.positionCode,
				};
				if (!this.isUnemployment) {
					params.vtgh = this.workYearsCode;
					params.tdjn = this.incomeLevelCode;
				}

				api.uploadUserInfo(params).then(() => {
					console.log('存储成功');
					this.endTiming('page');

					// 公共埋点
					setfengkongDot('WorkDataPageStopDurationALL', this.fillTimes.page);

					// 填写总时长
					let totalTime = Number(this.fillTimes.positionCode || 0);
					if (!this.isUnemployment) {
						totalTime += Number(this.fillTimes.workYearsCode || 0) + Number(this.fillTimes
							.incomeLevelCode || 0);
					}
					setfengkongDot('WorkDataPageCompleteDurationALL', totalTime);

					// 单项埋点
					setfengkongDot('ProfessionCompleteDuration', this.fillTimes.positionCode);
					if (!this.isUnemployment) {
						setfengkongDot('WorkYearCompleteDuration', this.fillTimes.workYearsCode);
						setfengkongDot('MonthlyIncomeCompleteDuration', this.fillTimes.incomeLevelCode);
					}
					setfengkongDot('cansubmit', 0)

					setDot('CLICK_WORK_INF_SUBMIT');

					uni.reLaunch({
						url: '/pages/demo5/demo5'
					});

					// 重新计算下拉框填写时长
					this.clearSelectStartFlags();
				});
			},
			// 开始计时
			startTiming(field) {
				this.startTimes[field] = Date.now();
			},
			// 结束计时并计算时长
			endTiming(field) {
				console.log('计算结束时长', field);
				if (this.startTimes[field]) {
					const endTime = Date.now();
					this.fillTimes[field] = endTime - this.startTimes[field];
					this.startTimes[field] = null; // 重置
				}
			},
			clickeFun(field) {
				const key = `${field}Changebegin`;
				if (!uni.getStorageSync(key)) {
					this.startTiming(field);
					uni.setStorageSync(key, true)
				}
			},
			handleSelectChange(field, event) {
				console.log('field', field);
				console.log('event', event);
				if (field == 'positionCode' && event) {
					let currentjob = this.dropdowns.position.find(item => item.value == event)
					console.log('currentjob.text', currentjob.text);
					this.isUnemployment = currentjob.text == "ว่างงาน" ? true : false
					console.log('this.isUnemployment', this.isUnemployment);
				}
				const key = `${field}Changebegin`;
				if (uni.getStorageSync(key)) {
					this.endTiming(field);
				}
			},
			clearSelectStartFlags() {
				const keys = [
					'positionCodeChangebegin',
					'workYearsCodeChangebegin',
					'incomeLevelCodeChangebegin',
				];
				keys.forEach(key => uni.removeStorageSync(key));
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
	  background-color: #1F2022;
	}
	.P-5 {
		width: 100%;
		background-image: url('/static/inputborder.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 6rpx 20rpx;
		box-sizing: border-box;
		height: 100rpx;
	}

	::v-deep .uni-input-input {
		font-size: 16px !important;
	}

	::v-deep .uni-input-placeholder {
		color: #999 !important;
		font-size: 16px !important;
	}

	.P-head {
		width: 100%;
		background-color: #1F2022;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: -110rpx;


		image {
			width: 100rpx;
			height: 100rpx;
		}
	}


	.P-1 {
		margin-top: 20px;

		image {
			width: 100%;
			height: 100rpx;
		}
	}

	.P-2 {
		width: 100%;
		margin: 20rpx 0rpx;

		.P-2-title {
			height: 100rpx;
			background-image: url('../../static/tipsbg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 0rpx 20rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 40rpx;
			}
		}

		.gradient-text {
			background: linear-gradient(to bottom, rgba(204, 154, 243, 1), #F9E4B7);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
			font-size: 32rpx;
			/* 根据需要调节 */
		}

		p {
			width: 86%;
			height: 90rpx;
			background-color: #FFF584;
			text-align: center;
			color: #000;
			line-height: 90rpx;
			border-radius: 20rpx;
			font-size: 40rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			// animation: pulsebtn 1.2s ease-in-out infinite;

		}

		p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		@keyframes pulsebtn {
			0% {
				transform: scale(1);
			}

			50% {
				transform: scale(1.08);
			}

			100% {
				transform: scale(1);
			}
		}

	}

	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
</style>